<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%> 
<html>
<head>
		<meta charset="utf-8" />
		<meta name="keywords" content="pinpin社保" />
		<meta name="description" content="pinpin社保" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="renderer" content="webkit" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
		<title>社保运营后台-城市配置</title>
		<link rel="stylesheet" href="/as/css/bootstrap.css" />
		<link rel="stylesheet" href="/as/css/layout.css" />
	<!-- CSS to style the file input field as button and adjust the Bootstrap progress bars -->
	<link rel="stylesheet" href="/as/jquery-upload-file/css/jquery.fileupload.css">
	<link rel="stylesheet" href="/as/jquery-upload-file/css/jquery.fileupload-ui.css">
	<style type="text/css">
		.bar {
		    height: 18px;
		    background: green;
		}
	</style>
	<%@ include file="/WEB-INF/jsp/common/common.jsp" %>
	<script type="text/javascript">
	var host = document.domain;
	var port = location.port;
	var host_port = host; // 用于上传图片。
	if (port > 1000) {
		host_port = host_port + ":8500";
	}
	</script>
</head>
<body>
	<div id="wrapper">
		<%@ include file="/WEB-INF/jsp/common/menu.jsp" %>
		<div id="page-wrapper">
        	<div class="row">
                <div class="col-lg-12">
                    <!-- 路径导航 -->
                    <ol class="breadcrumb">
				      <li>WEB服务相关配置</li>
				    </ol>
                </div>
            </div>
            <div class="row">
            	<div class="col-lg-12">
            		<div class="panel panel-default">
            			<div class="panel-body">
        			    	<div class="form-inline dt-bootstrap no-footer">
                            <div class="row">           
                                <div class="col-lg-1">
                                	&nbsp; <input id="addBtn" class="btn btn-primary" type="button" value="新增广告" onclick="javascript:toAdd()">
                                </div>
                                <div class="col-lg-11">
	                                <form action="${list_uri }" method="POST" class="form-check" id="queryOrderForm">
	                                	<label class="checkbox-inline text-primary" style="margin-top:10px">子系统 :
                                        	<select name="adSys" class="form-control">
                                        		<c:forEach items="${adSyss }" var="sys">
                                        		<option value="${sys.name }" <c:if test="${adSys==sys.name }">selected</c:if>>${sys.desc }</option>
                                        		</c:forEach>
                                        	</select>
        			    			    </label>
        			    			    <label class="checkbox-inline text-primary" style="margin-top:10px">广告类型:
                                        	<select name="adType" class="form-control">
                                        		<c:forEach items="${adTypes }" var="ad">
                                        		<option value="${ad.name }" <c:if test="${adType==ad.name }">selected</c:if>>${ad.desc }</option>
                                        		</c:forEach>
                                        	</select>
        			    			    </label>
	                                	<label class="checkbox-inline text-primary" style="margin-top:10px">是否启用 :
                                        	<select name="enable" class="form-control">
                                        		<option value="0" <c:if test="${!enable }">selected</c:if>>否</option>
                                        		<option value="1" <c:if test="${enable }">selected</c:if>>启用中</option>
                                        	</select>
        			    			    </label>
        			    			    <input class="btn btn-sm btn-primary" type="submit" value="查询" >
	                                </form>
                                </div>
                            </div>
                            <!-- 表格列表 -->
                            <div class="row">                 
                                <div class="col-lg-12">
				            		<div class="panel panel-default">
				            			<div class="panel-body">
				                            <div class="tab-content">
				                                <div class="tab-pane fade in active" id="bannerP">				                                	
				                                    <table class="table table-striped table-bordered table-hover no-footer table-title" role="grid">
				                                        <thead id="scrollTr">
				                                            <tr>
				                                                <th>主题</th>
				                                                <th>描述</th>
				                                                <th>图片</th>
				                                                <th>跳转链接</th>
				                                                <th>位置</th>
				                                                <th>是否启用</th>
				                                                <th>广告类型</th>
				                                                <th>适用子系统</th>
				                                                <th>配置时间</th>
				                                            </tr>
				                                        </thead>
				                                        <tbody>
				                                        <c:forEach items="${adList }" var="c">
				                                        	<tr role="row">
				                                        		<td style="text-align:left;">
				                                        			<c:if test="${c.enabled == 0 }" ><input type="button" class="btn btn-warning" value="删除" onclick="delAd(this, ${c.id})"/> </c:if> 
				                                        			<a id="a${c.id }" href="javascript:toEdit(${c.id })">${c.title }</a>
				                                        		</td>
				                                        		<td>${c.notes }</td>
				                                        		<td>
				                                        			<img id="img${c.id }" width="80px" height="60px">
				                                        			<script type="text/javascript">
				                                        				$("#img${c.id}").attr("src", "http://"+ host + "${c.img_path }");
				                                        			</script>
				                                        		</td>
				                                        		<td>${c.img_link }</td>
				                                        		<td>
				                                        			<c:if test="${c.position > 1 }" >
				                                        			<input id="posBtn" class="btn btn-primary btn-sm" type="button" value=" - 1 " onclick="javascript:updatePos(${c.id }, -1)"> &nbsp;<br>
				                                        			</c:if>${c.position } &nbsp;<br>
				                                        			<c:if test="${c.position < 100 }" >
				                                        			<input id="posBtn" class="btn btn-primary btn-sm" type="button" value=" + 1 " onclick="javascript:updatePos(${c.id }, 1)">
				                                        			</c:if>
				                                        		</td>
				                                        		<td>
				                                        			<c:if test="${c.enabled == 1 }" ><input id="enabledBtn" class="btn btn-primary btn-sm" type="button" value="下架" onclick="javascript:updateEnabled(${c.id })"><br>
				                                        				<span class="text-success">启用中</span></c:if><c:if test="${c.enabled == 0 }" ><span class="text-danger">已下架</span><br><input id="enabledBtn" class="btn btn-primary btn-sm" type="button" value="上 架" onclick="javascript:updateEnabled(${c.id })"></c:if>
				                                        			 &nbsp;
				                                        		</td>
				                                        		<td><c:forEach items="${adTypes }" var="ad"><c:if test="${c.adType==ad.name }">${ad.desc }</c:if></c:forEach></td>
				                                        		<td><c:forEach items="${adSyss }" var="sys"><c:if test="${c.adSys==sys.name }">${sys.desc }</c:if></c:forEach></td>
				                                        		<td>${c.gen_time }</td>
				                                            </tr>
				                                        </c:forEach>
				                                        </tbody>
				                                    </table>
				                                </div>
				                            </div>
				                        </div>
				                    </div>
                                <!-- <label></label>-->
                                </div>
                            </div>
            			</div>
            		</div>
            	</div>
            </div>
        </div>
	</div>
	</div>
	<div id="addBox" style="display:none;width:560px">
		<div class="row">
        	<div class="col-lg-12">
				<form action="" name="addForm" id="addForm" method="post">
					<input type="hidden" id="adId" name="id" value="0">
					<input type="text" class="form-control" id="title" name="title"  placeholder="主题"><br/>
					<textarea class="form-control" id="notes" name="notes"  placeholder="广告描述（128字内）"></textarea><br/>
					
					<div class="row fileupload-buttonbar">
					 	<div class="col-lg-6">
							 <span class="btn btn-success fileinput-button">
					             <i class="glyphicon glyphicon-plus"></i>
					             <span>选择广告图片文件...</span>
					             <input type="file" name="files" id="fileupload" />
					         </span>
					     </div>
					     <div class="col-lg-6" style="padding-top:10px">
					         <div id="progress" style="background:#E6E6E6">
					             <div class="bar" style="width:0%;"></div>
					         </div>
				         </div>
			         </div>
			         <label>图片位置：</label>
					 <label class="text-inline" style="padding-bottom:10px">
						<input type="text" readOnly class="form-control" id="img_path" name="img_path"></label>
			         <br/>
				
					<input type="text" class="form-control" id="img_link" name="img_link"  placeholder="跳转链接"><br/>
					<input type="number" class="form-control" id="position" name="position" placeholder="展示顺序 1~255"><br/>
					<label>是否启用：</label>
					<label class="checkbox-inline" style="padding-bottom:10px">
						<input type="radio" name="enabled" value="1" checked>启用</label>
					<label class="checkbox-inline" style="padding-bottom:10px">
						<input type="radio" name="enabled" value="0">下架</label>
					<br>
					<label>广告类型：</label>
					<c:forEach items="${adTypes }" var="ad">
					<label class="checkbox-inline" style="padding-bottom:10px">
						<input type="radio" name="adType" value="${ad.name }">${ad.desc }</label></c:forEach>
					<br>
					<label>适用子系统：</label>
					<c:forEach items="${adSyss }" var="sys">
					<label class="checkbox-inline" style="padding-bottom:10px">
						<input type="checkbox" name="adSys" value="${sys.name }">${sys.desc }</label></c:forEach>
					<br>
					
					<button type="button" class="btn btn-primary" style="margin-left: 360px" onclick="javascript:addAd();">确定</button>
				</form>
			</div>
		</div>
	</div>
</body>

<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
<script src="/as/jquery-upload-file/vendor/jquery.ui.widget.js"></script>
<!-- The basic File Upload plugin -->
<script src="/as/jquery-upload-file/jquery.fileupload.js"></script>
<!--[if (gte IE 8)&(lt IE 10)]>
<script src="/as/jquery-upload-file/cors/jquery.xdr-transport.js"></script>
<![endif]-->
<script type="text/javascript">
var add_ad_uri = "${add_ad_uri}";
var to_edit_uri = "${to_edit_uri}";
var enabled_ad_uri = "${enabled_ad_uri}";
var position_ad_uri = "${position_ad_uri}";
var del_uri = "${del_ad_uri}";
var upload_adImg_uri =document.location.protocol+"//" + host_port + "/sbw/upload/ad/v1"; // protocol == "https:"
$(function () {

	$('#fileupload').fileupload({
        url: upload_adImg_uri,
        type:"POST",
        dataType: 'JSON',
        //跨域
　　　　 //forceIframeTransport: true,
        add: function (e, data) {
        	//$("#upload_msg").text("正在上传……");
        	data.submit().error(function (jqXHR, textStatus, errorThrown) {
        		//$("#upload_msg").css('color','red').text("上传失败 ( "+textStatus+" : "+errorThrown+" )");
        		$('#progress .bar').css('width', '0%');
        	});
        }, 
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .bar').css('width', progress + '%');
        },
        done: function (e, data) {
            $("#img_path").val(data.result.data);
			notice("上传成功: " + data.result.data, 1);
        }
    });
    
});

function toAdd() {
	if ($("#adId").val() > 0) {
		iRun("需要重新刷新网页。", 1, function() {
			document.location.reload();
		});
		return;
	}
	var content=document.getElementById("addBox");
    dialog({
  	  title: '新增广告',
  	  content: content,
  	  follow: document.getElementById("addBtn"),
  	  quickClose:true}).show();
}

function addAd() {
	notice("提交中……", 2);
	var data = $("#addForm").serialize();
	$.post(add_ad_uri, data, function(ret,status){
		if (ret.code==200) {
			iRun("广告配置成功。", 1, function() {
				document.location.reload();
			});
		} else {
			notice(ret.code + "  " + ret.msg);
		}
		$("#adId").val("0");
	});
}

function toEdit(adId) {
	notice("正在加载数据。", 1);
	$.post(to_edit_uri, "id="+adId, function(ret,status){
		var d = ret.data;
		$("#adId").val(d.id);
		$("#title").val(d.title);
		$("#notes").val(d.notes);
		$("#img_path").val(d.img_path);
		$("#img_link").val(d.img_link);
		$("#position").val(d.position);
		$("input[name='enabled'][value="+d.enabled+"]").prop("checked",true);
		$("input[name='adType'][value="+d.adType+"]").prop("checked",true);
		$("input[name='adSys'][value="+d.adSys+"]").prop("checked",true);
	});
	var content=document.getElementById("addBox");
    dialog({
  	  title: '修改',
  	  content: content,
  	  follow: document.getElementById("a"+adId),
  	  quickClose:true}).show();
}

function updateEnabled(idv) {
	var data = {id: idv};
	$.post(enabled_ad_uri, data, function(ret,status){
		if (ret.code==200) {
			notice("上下架操作成功。", 1);
			document.location.reload();
		} else {
			notice(ret.code + "  " + ret.msg);
		}
	});
}
function updatePos(idv, posV) {
	var data = {id: idv, pos: posV};
	$.post(position_ad_uri, data, function(ret,status){
		if (ret.code==200) {
			notice("上下架操作成功。", 1);
			document.location.reload();
		} else {
			notice(ret.code + "  " + ret.msg);
		}
	});
}

function delAd(btnObj, idv) {
	var data = {id: idv};
	btnConfirm(btnObj, "确定删除？", "只能删除已停用的广告。", function(){
		$.post(del_uri, data, function(ret,status){
			if (ret.code==200) {
				iRun(ret.msg, 1, function(){
					window.location.reload();
				});
				
			} else {
				notice(ret.code + "  " + ret.msg);
			}
		});
	});
}
</script>
</html>